<template>
  <div>
    <PageTitle :title="titleName"></PageTitle>
    <div class="form-wrapper">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="所属公司" prop="companyId">
          <el-select v-model="ruleForm.companyId" :disabled="!isDisable">  
            <el-option v-for="(item, index) in typeList" :key="index" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌名称" prop="fication">
          <el-input v-model="ruleForm.fication"></el-input>
        </el-form-item>
        <el-form-item label="开启余额支付">
          <el-switch
            v-model="payType"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否">
          </el-switch>
        </el-form-item>
        
        <el-form-item label="商品价格" prop="gprice">
          <el-input v-model.number="ruleForm.gprice" placeholder="请输入商品价格">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="几个包邮" prop="num">
          <el-input v-model.number="ruleForm.num" placeholder="请输入包邮数量起点">
            <template slot="append">个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="运费" prop="price">
          <el-input v-model.number="ruleForm.price" placeholder="请输入运费">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否跳过拆盒">
          <el-switch
            v-model="demolition"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="不跳"
            inactive-text="跳">
          </el-switch>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="logoFile">
          <Upload
            :fileListArr="ruleForm.logoFile"
            :fileListName="'logoFile'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <el-form-item label="套盒封面" prop="boxCover">
          <Upload
            :fileListArr="ruleForm.boxCover"
            :fileListName="'boxCover'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <el-form-item label="详情图" prop="fileList">
          <Upload
            :fileListArr="ruleForm.fileList"
            :fileListName="'fileList'"
            :fileMaxCount="10"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <!-- <el-form-item label="款式图" prop="openFile">
          <Upload
            :fileListArr="ruleForm.openFile"
            :fileListName="'openFile'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>  -->
        <el-form-item label="未开盒图片" prop="unOpenFile">
          <Upload
            :fileListArr="ruleForm.unOpenFile"
            :fileListName="'unOpenFile'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <el-form-item label="盲盒顶部" prop="boxTop">
          <Upload
            :fileListArr="ruleForm.boxTop"
            :fileListName="'boxTop'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <el-form-item label="盲盒正面" prop="boxFace">
          <Upload
            :fileListArr="ruleForm.boxFace"
            :fileListName="'boxFace'"
            :fileMaxCount="1"
            @fileChange="fileChange"
          ></Upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  import Upload from '@/components/upload/Upload.vue'
  import _ from 'lodash'
  export default {
    name: 'SecondTypeDetail',
    components: {
      PageTitle,
      Upload
    },
    activated() {
      if(this.$route.params.id != 'none') {
        this.ruleForm.fication = this.$route.params.fication
        this._get()
      }
      this._getType()
    },
    deactivated() {
      this.$destroy()
    },
    data() {
      return {
        typeList: [],
        payType: false,
        demolition:false,
        ruleForm: {
          companyId: '',
          ficationId: '',
          fication: '',
          num: '',
          price: '',
          gprice:'',
          logoFile: [],
          boxCover: [],
          boxTop: [],
          boxFace: [],
          payTypeList: [],    //type: 1是    type: 2 否
          fileList: [],
          openFile: [],
          unOpenFile: []
        },
        rules: {
          companyId: [
            { required: true, message: '请选择所属公司', trigger: 'change' }
          ],
          fication: [
            { required: true, message: '请输入品牌名称', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入包邮数量起点', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入运费', trigger: 'blur' }
          ],
          gprice: [
            { required: true, message: '请输入价格', trigger: 'blur' },
            {
              validator(rule, value, callback) {
                const boolean = new RegExp(/^([1-9]\d{0,8}|0)(\.\d{1,2})?$/).test(value)
                if(!boolean) {
                  return callback(new Error('请正确输入商品价格'))
                }
                return callback()
              },
              trigger: 'blur'
            }
          ],
          logoFile: [
            { type: 'array', required: true, message: '请上传品牌LOGO' }
          ],
          boxCover: [
            { type: 'array', required: true, message: '请上传套盒封面' }
          ],
          boxTop: [
            { type: 'array', required: true, message: '请上传封面盲盒顶部' }
          ],
          boxFace: [
            { type: 'array', required: true, message: '请上传封面盲盒正面' }
          ],
          fileList: [
            { type: 'array', required: true, message: '请上传详情图' }
          ],
          openFile: [
            { type: 'array', required: true, message: '请上传款式图' }
          ],
          unOpenFile: [
            { type: 'array', required: true, message: '请上传未开盒展示图' }
          ],
        }
      }
    },
    computed: {
      titleName() {
        return this.$route.params.id == 'none' ? '添加品牌' : '查看品牌'
      },
      submitUrl() {
        return this.$route.params.id == 'none' ? this.$api + '/v1/fication/fication' : this.$api + '/v1/fication/modify'
      },
      isDisable() {
        return this.$route.params.id == 'none'
      },
      logoIdArr() {
        return this.ruleForm.logoFile.map(item => {
          return item.id
        }).toString()
      },
      boxCoverIdArr() {
        return this.ruleForm.boxCover.map(item => {
          return item.id
        }).toString()
      },
      boxTopIdArr() {
        return this.ruleForm.boxTop.map(item => {
          return item.id
        }).toString()
      },
      boxFaceIdArr() {
        return this.ruleForm.boxFace.map(item => {
          return item.id
        }).toString()
      },
      fileIdArr() {
        return this.ruleForm.fileList.map(item => {
          return item.id
        }).toString()
      },
      openFileArr() {
        return this.ruleForm.openFile.map(item => {
          return item.id
        }).toString()
      },
      unOpenFileArr() {
        return this.ruleForm.unOpenFile.map(item => {
          return item.id
        }).toString()
      },
    },
    watch: {
      payType() {
        this.ruleForm.coverFileList = []
      }
    },
    methods: {
      async _getType() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/company/list',
          method: 'GET',
          params: {
            current: 1,
            size: 1000
          }
        })
        if (code === 0) {
          this.typeList = data.items
          if(this.$route.params.id != 'none') {
            this.ruleForm.companyId = this.$route.params.companyId
          }
        }
      },
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/fication/details',
          method: 'GET',
          params: {
            id: this.$route.params.id
          }
        })
        if (code === 0) {
          this.ruleForm.gprice = data.items.gprice
          this.ruleForm.price = data.items.price
          this.ruleForm.num = data.items.num
          if(data.items.balance === "1"){
            this.payType = true
          }
          if(data.items.demolition === "1"){
            this.demolition = true
          }
          if (data.items.url) {
            this.ruleForm.logoFile.push({
              id: data.items.log,
              url: data.items.url
            })
          }
          if (data.image[0].url) {
            this.ruleForm.boxCover.push({
              id: data.image[0].id,
              url: data.image[0].url
            })
          }
          if (data.image[1].url) {
            this.ruleForm.boxTop.push({
              id: data.image[1].id,
              url: data.image[1].url
            })
          }
          if (data.image[2].url) {
            this.ruleForm.boxFace.push({
              id: data.image[2].id,
              url: data.image[2].url
            })
          }
          
        //   this.ruleForm.openFile.push({
        //     id: data.image[4].id,
        //     url: data.image[4].url
        //   })
          if (data.image[3].url) {
            this.ruleForm.unOpenFile.push({
              id: data.image[3].id,
              url: data.image[3].url
            })
          }
          
          // console.log(data.details);
          data.details.forEach(item => {
            if (item.url) {
              this.ruleForm.fileList.push(item)
            }
            
          })
          // console.log('aa', this.ruleForm.fileList);
        }
      },
      fileChange(data) {
        this.ruleForm[data.el] = data.arr
      },
      submitForm: _.throttle(function() {
        this.$refs.ruleForm.validate(async (valid) => {
          if(!valid) {
            return false
          }
          let {data: { code } } = await this.$axios({
            url: this.submitUrl,
            method: 'POST',
            data: {
              company_id: this.ruleForm.companyId,
              fication_name: this.ruleForm.fication,
              log: this.logoIdArr,
              details: this.boxCoverIdArr,
              deta: this.boxTopIdArr,
              blind: this.boxFaceIdArr,
              balance: this.payType ? "1" : "2",
              num: this.ruleForm.num,
              price: this.ruleForm.price,
              gprice: this.ruleForm.gprice,
              id: this.$route.params.id,
              demolition:this.demolition ? "1" : "2",
              image: this.fileIdArr,
              open: this.openFileArr,
              no: this.unOpenFileArr,
            }
          })
          
          if (code == 0) {
            this.$message.success('操作成功！')
            setTimeout(() => {
             this.$router.go(-1)
            }, 2000)
          }
        })
      }, 2000, { trailing: false }),
    }
  }
</script>

<style>
</style>
